<script>
import _ from 'lodash';
import LabeledInput from '@/components/form/LabeledInput';
import LabeledSelect from '@/components/form/LabeledSelect';
import { opcTypeOption, register, booleanType, READ_ONLY } from '@/config/map';

const properties = {
  name:        '',
  description: '',
  readOnly:    false,
  value:       '',
  type:        'boolean',
  visitor:     {
    nodeID:     '',
    browseName: '',
  }
};

export default {
  components: {
    LabeledInput,
    LabeledSelect
  },

  props: {
    visible: {
      type:    Boolean,
      default: false
    },
    templateSpec: {
      type:     Object,
      required: true
    },
    editRowIndex: {
      type:     Number,
      required: true
    },
    dialogModel: {
      type:     String,
      required: true
    },
  },

  data() {
    const localDevice = _.cloneDeep(this.templateSpec);
    let index = 0;

    if (this.dialogModel === 'create') {
      localDevice.properties.push(_.cloneDeep(properties));
      index = localDevice.properties.length - 1;
    } else {
      index = this.editRowIndex;
    }

    return {
      index,
      register,
      booleanType,
      READ_ONLY,
      localDevice,
      opcTypeOption,
      activeNames:   [],
      newProperties: properties,
    };
  },

  computed: {
    propLength() {
      return this.localDevice.properties.length;
    }
  },

  methods: {
    add(formName) {
      const properties = this.localDevice.properties;

      this.$emit('addProperties', _.cloneDeep(properties));
      this.$nextTick(() => {
        this.$emit('hideDialog', false);
      });
    },
    hide(formName) {
      this.$emit('hideDialog', false);
    },
    changeRegister(value) {
      this.register.forEach((item) => {
        if (item.value === value) {
          const index = this.index;

          this.localDevice.properties[index].readOnly = item.readOnly;
        }
      });
    },
    clearValue() {
      const index = this.index;

      this.localDevice.properties[index].value = '';
    }
  }
};
</script>

<template>
  <el-dialog
    v-if="propLength"
    width="1000px"
    class="popUp"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="hide"
  >
    <header slot="title">
      <span class="icon"></span>添加新属性
    </header>

    <div class="row">
      <div class="col span-6">
        <LabeledInput
          v-model="localDevice.properties[index].name"
          label="属性名"
          placeholder="请输入名称"
        />
      </div>

      <div class="col span-6">
        <LabeledInput
          v-model="localDevice.properties[index].description"
          label="描述"
          placeholder="请输入描述"
        />
      </div>
    </div>

    <div class="row">
      <div class="col span-12">
        <LabeledSelect
          v-model="localDevice.properties[index].readOnly"
          label="readOnly"
          :options="READ_ONLY"
        />
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <LabeledSelect
          v-model="localDevice.properties[index].type"
          label="类型"
          :options="opcTypeOption"
          @input="clearValue"
        />
      </div>

      <div v-if="localDevice.properties[index].readOnly === false" class="col span-6">
        <select
          v-if="localDevice.properties[index].type === 'boolean'"
          key="selectDataType"
          v-model="localDevice.properties[index].value"
          class="bigInput"
        >
          <option v-for="opt in booleanType" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>

        <input
          v-else
          key="inputDataType"
          v-model="localDevice.properties[index].value"
          autocorrect="off"
          class="bigInput"
          autocapitalize="off"
          spellcheck="false"
        />
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <LabeledInput
          v-model="localDevice.properties[index].visitor.nodeID"
          label="nodeID"
        />
      </div>

      <div class="col span-6">
        <LabeledInput
          v-model="localDevice.properties[index].visitor.browseName"
          label="browseName"
        />
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="hide('form')">取 消</el-button>
      <el-button type="primary" @click="add('form')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<style lang="scss" scoped>
header {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 36px;
  font-weight: bold;
  color: #363636;

  .icon {
    margin-right: 6px;
    width: 3px;
    height: 18px;
    background-image: linear-gradient(#030b56, #1144d4);
  }
}
.bigInput {
  height: 50px;
}
</style>
